<template>
<div class="common-page home">
  <xdh-grid-layout :layout="layout" fit-row>
    <div class="north-west grid-item" slot="0">
      <case-state></case-state>
    </div>
    <div class="north-east grid-item"  slot="1">
      <div class="case-intel-wrap">
        <div class="case-intel">
          <div class="item">人员信息</div>
          <div class="item">物品信息</div>
          <div class="item">标识号信息</div> 
          <div class="item">组织信息</div>
          <div class="item">地址信息</div>
          <div class="item">串并信息</div>
          <div class="item">比对信息</div>
          <div class="item">轨迹信息</div>
          <div class="item">视频图像</div>
          <div class="item">现场勘验</div>
          <div class="item">法律文书</div>
          <div class="item">电子笔录</div>
          <div class="item">电子话单</div>
          <div class="item">刑事技术</div>
          <div class="item">围栏信息</div>
        </div>  
      </div>
      <div class="case-clue-wrap">
        <div class="case-clue">
          <div class="item-wrap" v-for="i in 16" :key="i">
            <div class="item">
              <div class="icon"><em class="iconfont icon-component"></em></div>
              <p>应用{{i}}</p>
            </div>
          </div>
        </div> 
      </div>
    </div>
    <div class="south-west grid-item" style="" slot="2">
      <div class="detective-info">
        <h3 class="title">案件侦办动态</h3>
        <div class="lists">
          <div class="list" v-for="i in 5" :key="i">
            <xdh-image-text style="width:100%;">
              <xdh-avatar slot="image">H{{i}}</xdh-avatar>
              <template slot="text">
                <div>内容描述 this is description.this is description.this is description.this is description</div>
              </template>
            </xdh-image-text> 
          </div>
        </div>
      </div>
    </div>
    <div class="south-east grid-item" slot="3">
      <div class="detective-push">
        <h3 class="title">智能研判推送</h3>
        <div class="lists">
          <div class="list" v-for="i in 5" :key="i">
            <xdh-image-text style="width:100%;">
              <xdh-avatar slot="image">H{{i}}</xdh-avatar>
              <template slot="text">
                <div>内容描述 this is description.this is description.this is description.this is description</div>
              </template>
            </xdh-image-text> 
          </div>
        </div>
      </div>
    </div>

  </xdh-grid-layout>
</div>
</template>

<style lang="scss" scoped>
@import "../../../src/style/_vars.scss";
.home{
  background: $--background-color-base;
  .grid-item{
    height: 100%;
  }
  .north-west.grid-item{ color: black; }
  .north-east.grid-item{
    display:flex;
    flex-flow: column;
    .case-intel-wrap{
      flex: 1;
      width: 100%;
      .case-intel{
        display:flex;
        align-items: center;
        height: 100%;
        flex-flow: row wrap;
        border-radius: 10px;
        background: white;
        .item{
          flex: 0 0 18%;
          margin: 0 1%;
          line-height:30px;
          text-align: center;
          border-radius: 5px;
          background: gray;
          color: white;
        }
      }
    }
    .case-clue-wrap{
      flex: 1; // 0 1 auto;
      width: 100%;
      margin-top: 10px;
      .case-clue{
        display:flex;
        flex-flow:row wrap;
        height: 100%;
        align-items: center;
        border-radius: 10px;
        background: white;
        .item-wrap{
          flex: 0 0 12.5%;
          height: 50%;
          text-align:center;
          .item{
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;
            height:100%;
            max-width: 100%;
            .icon{
              width: 40px;
              height: 40px;
              line-height: 40px;
              text-align: center;
              margin: 0 auto;
              border:1px solid black;
              border-radius: 5px;
            }
            p{
              padding: 0;
              margin: 0;
              line-height: 1.4;
            }
          }
        }
      }
    }
  }
  .south-west.grid-item{
    .detective-info{
      display: flex;
      flex-flow: column;
      height: 100%;
      border-radius: 10px;
      background: white;
      .title{
        flex: 0 0 auto;
        line-height: 2;
        padding: 0 5px;
        margin: 0;
        border-bottom: 1px solid $--background-color-base;  
      }
      .lists{
        flex: 1;
        overflow: auto; // hidden;
        .list{
          padding: 10px 5px;
        }
      }
    }
  }
  .south-east.grid-item{
    .detective-push{
      display: flex;
      flex-flow: column;
      height: 100%;
      border-radius: 10px;
      background: white;
      .title{
        flex: 0 0 auto;
        line-height: 2;
        padding: 0 5px;
        margin: 0;
        border-bottom: 1px solid $--background-color-base;  
      }
      .lists{
        flex: 1;
        overflow: auto; // hidden;
        .list{
          padding: 10px 5px;
        }
      }
    }
  }
}
</style>

<script>
import XdhGridLayout from '@/widgets/xdh-grid-layout'
// import XdhList from '@/widgets/xdh-list'
import XdhAvatar from '@/widgets/xdh-avatar'
import XdhImageText from '@/widgets/xdh-image-text'
import CaseState from '../components/home/case-state'
export default {
  name: 'home',
  components: {
    XdhGridLayout,
    CaseState,
    // XdhList,
    XdhAvatar,
    XdhImageText
  },
  props: {
  },
  data() {
    return {
      layout: [
        {'x': 0, 'y': 0, 'w': 6, 'h': 1, 'i': '0'},
        {'x': 6, 'y': 0, 'w': 6, 'h': 1, 'i': '1'},
        {'x': 0, 'y': 2, 'w': 6, 'h': 1, 'i': '2'},
        {'x': 6, 'y': 2, 'w': 6, 'h': 1, 'i': '3'}
      ]
    }
  },
  watch: {
    
  },
  methods: {
  },
  mounted() {
  }
}
</script>

